<template>
  <!-- 场所室内安全检查内容 -- 检查的  合格/不合格 -->
  <view class="siteInspectionContent">
    <view class="wrapper">
      <view class="rules-all" v-for="item in details" :key="item.id">
        <view class="state">
          {{ item.industryExamineCategoryName }}
        </view>

        <block v-for="check in item.checkDetailInfoList" :key="check.sortOrder">
          <view class="rules-matter">
            <view style="padding-bottom: 20rpx">
              {{ check.sortOrder }} {{ check.industryExamineDetailName }}
            </view>
            <view class="status">
              <!-- examineIcon_1.png   已选 -->
              <!-- examineIcon_2.png   未选 -->
              <!-- examineIcon_3.png   错误 -->
              <view class="sta-item">
                <image
                  :src="baseImgUrl + 'examineIcon_1.png'"
                  v-if="check.pass == 1"
                ></image>
                <image :src="baseImgUrl + 'examineIcon_2.png'" v-else></image>
                <view>是</view>
              </view>

              <view class="sta-item">
                <image
                  :src="baseImgUrl + 'examineIcon_3.png'"
                  v-if="check.pass == 0"
                ></image>
                <image :src="baseImgUrl + 'examineIcon_2.png'" v-else></image>
                <view>否</view>
              </view>

              <view class="sta-item">
                <block v-if="check.noInvolveStatus == 1">
                  <image
                    :src="baseImgUrl + 'examineIcon_1.png'"
                    v-if="check.pass == 2"
                  ></image>
                  <image :src="baseImgUrl + 'examineIcon_2.png'" v-else></image>
                  <view>不涉及</view>
                </block>
              </view>
            </view>
          </view>
          <view style="padding: 10rpx 0"></view>
          <!-- <view style="padding: 25rpx 0"><u-line></u-line></view> -->
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import { findTaskUnqualified } from "@/api/goover.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      imgPrefix: uni.getStorageSync("imgPrefix"),
      options: "",
      details: {},
    };
  },
  onLoad(options) {
    this.options = options;
    this.getDetail();
  },
  methods: {
    getDetail() {
      findTaskUnqualified({
        taskId: this.options.taskId,
      }).then((res) => {
        this.details = res.result.checkCategoryInfoList || {};
      });
    },
  },
};
</script>

<style lang="scss">
.siteInspectionContent {
  height: 100%;
  background: #f6f6f6;
  overflow-y: hidden;
  padding: 16rpx 24rpx;
  .wrapper {
    padding: 34rpx 40rpx 0;
    overflow-y: auto;
    height: 97vh;
    background: #ffffff;
  }

  .rules-all {
    font-size: 30rpx;
    .state {
      display: inline-block;
      padding: 5rpx 25rpx;
      font-weight: bold;
      color: #2488f5;
      background: rgba(171, 213, 255, 0.2196);
      border-radius: 28rpx;
    }

    .rules-matter {
      padding-top: 25rpx;
      font-weight: 500;
      color: #333333;

      .status {
        display: flex;
        justify-content: space-between;
        margin-left: 30rpx;

        .sta-item {
          width: 33%;
          display: flex;
          align-items: center;
        }

        image {
          margin-right: 10rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
  }
}
</style>
